<!DOCTYPE html>
<html ng-app="app">

	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css"/>
		<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
			}
		</style>
		<script type="text/javascript">
			angular.module('app', []).controller('firstController',
				function($scope) {
					$scope.Product = [{
						id: 1000,
						name: "iPhone 6 Plus",
						quantity: 1,
						price: 6888
					}, {
						id: 1001,
						name: "iPhone 6",
						quantity: 1,
						price: 5288

					}, {
						id: 1002,
						name: "iPhone 5s",
						quantity: 1,
						price: 4188
					}, {
						id: 1003,
						name: "iPhone 5c",
						quantity: 1,
						price: 3288
					}];

					$scope.totalPrice = function() {
						var total = 0;
						angular.forEach($scope.Product, function(item) {
							total += item.quantity * item.price;
						});
						return total;
					}

					$scope.totalQuantity = function() {
						var total = 0;
						angular.forEach($scope.Product, function(item) {
							total += parseInt(item.quantity);
						});
						return total;
					}

					$scope.remove = function(index) {
						$scope.Product.splice(index, 1);
					}

					$scope.removeall = function() {
						var index;
						for(index = $scope.Product.length - 1; index >= 0; index--) {
							$scope.remove(index);
						}
					}

					$scope.reduce = function(index) {
						if($scope.Product[index].quantity != 1) {
							$scope.Product[index].quantity--;
						} else {
							var ans = confirm("是否移除该产品？");
							if(ans) {
								$scope.remove(index);
							} else {
								$scope.Product[index].quantity = 1;
							}
						}
					}

					$scope.add = function(index) {
						$scope.Product[index].quantity++;
					}

					$scope.$watch('Product', function(newValue, oldValue) {
						angular.forEach(newValue, function(item, key) {
							if(item.quantity < 1) {
								var ans = confirm("是否移除该产品？");
								if(ans) {
									$scope.remove(key);
								} else {
									item.quantity = oldValue[key].quantity;
								}
								return;
							}
						});
					}, true);

				});
		</script>

	</head>

	<body>
		<div class="container" ng-controller="firstController">
			<table class="table">
				<thead>
					<tr>
						<th>产品编号</th>
						<th>产品名称</th>
						<th>购买数量</th>
						<th>产品单价</th>
						<th>产品总价</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in Product">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>
							<button type="button" class="btn" ng-click="reduce($index)">-</button>
							<input type="text" name="" value="" placeholder="" ng-model="item.quantity">
							<button type="button" class="btn" ng-click="add($index)">+</button>
						</td>
						<td>{{item.price}}</td>
						<td>{{item.quantity*item.price}}</td>
						<td>
							<button type="button" class="btn btn-danger" ng-click="remove($index)">移除</button>
						</td>
					</tr>
					<tr>
						<td>总价格：{{totalPrice()}} 元</td>
						<td colspan="4">总购买数：{{totalQuantity()}}</td>
						<td>
							<button type="button" class="btn btn-danger" ng-click="removeall()">清空购物车</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

	</body>

</html>